<template>
	<div class="article-edit">
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
		<el-card class="mt-4 !border-none" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="85px" :rules="rules">
				<div class="xl:flex">
					<div>
						<el-form-item label="数据组名称" prop="name">
							<div class="w-80">
								<el-input v-model="formData.name" placeholder="请输入数据组名称" type="input"
									:autosize="{ minRows: 3, maxRows: 3 }" clearable />
							</div>
						</el-form-item>
						<el-form-item label="数据字段" prop="config_name">
							<div class="w-80">
								<el-input v-model="formData.config_name" placeholder="请输入数据字段" type="input"
									:autosize="{ minRows: 3, maxRows: 6 }" clearable />
							</div>
						</el-form-item>
						<el-form-item label="数据简介" prop="info">
							<div class="w-80">
								<el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" v-model="formData.info"
									maxlength="200" show-word-limit clearable />
							</div>
						</el-form-item>
						<el-form-item label="数类型" required prop="cate_id">
							<el-radio-group v-model="formData.cate_id">
								<el-radio :label="1">默认</el-radio>
								<el-radio :label="0">数据</el-radio>
							</el-radio-group>
						</el-form-item>
					</div>
				</div>
				<el-button class="m-2" type="primary" @click="addform()">添加字段</el-button>
				<div style="display: flex;" v-for="(item,index) in formData.fields" :key="index">
					<div  class="m-2"  >*字段{{index + 1}}</div>
					<div>
						<div style="display: flex;align-items: center;">
							<div class="w-60 m-2">
								<el-input type="input" :autosize="{ minRows: 6, maxRows: 6 }" v-model="item.name.vlaue"
									maxlength="200" show-word-limit clearable placeholder="字段名称：姓名" />
							</div>
							<div class="w-60 m-2">
								<el-input type="input" :autosize="{ minRows: 6, maxRows: 6 }" v-model="item.title.vlaue"
									maxlength="200" show-word-limit clearable placeholder="字段配置名：name" />
							</div>
							<div class="w-40 m-2">
								<el-select v-model="item.type.vlaue" placeholder="请选择类型">
									<el-option v-for="item in options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
							<div class="m-2" @click="dleForm(index)"><el-icon>
									<CircleClose />
								</el-icon></div>
						</div>
						<div class="w-80 m-2"
							v-if="item.type.vlaue == 'radio' || item.type.vlaue == 'checkbox' || item.type.vlaue == 'select'">
							<el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" v-model="item.param.value"
								maxlength="200" show-word-limit clearable :placeholder="item.param.placeholder" />
						</div>
					</div>
				</div>
			</el-form>
		</el-card>
		<footer-btns>
			<el-button type="primary" @click="handleSave">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="systemGroupListsEdit">
	import type { FormInstance } from 'element-plus'
	// import { useDictOptions } from '@/hooks/useDictOptions'
	import { detailSystem, addSystem, editSystem } from '@/api/systemGroup'
	import useMultipleTabs from '@/hooks/useMultipleTabs'


	const route = useRoute()
	const router = useRouter()
	const formData = reactive({
		id: '',
		cate_id: 1,
		name: '',
		info: '',
		config_name: '',
		fields: [{
			name: { vlaue: '' },
			param: { placeholder: '参数方式例如:\n1=白色\n2=红色\n3=黑色', value: '' },
			title: { vlaue: '' },
			type: { vlaue: '' }
		}],
	})
	const options = [
		{
			value: 'input',
			label: '文本',
		},
		{
			value: 'textarea',
			label: '多行文本',
		},
		{
			value: 'radio',
			label: '单选',
		},
		{
			value: 'checkbox',
			label: '多选',
		},
		{
			value: 'select',
			label: '下拉',
		},
		{
			value: 'upload',
			label: '单图',
		},
		{
			value: 'uploads',
			label: '多图',
		},
	]
	const { removeTab } = useMultipleTabs()
	const formRef = shallowRef<FormInstance>()
	const rules = reactive({
		title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
		cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
	})
	const getDetails = async () => {
		const data = await detailSystem({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
		})
	}

	const addform = () => {
		// let sun = 'input textarea radio checkbox select upload uploads';
		let arr = {
			name: { vlaue: '' },
			param: { placeholder: '参数方式例如:\n1=白色\n2=红色\n3=黑色', value: '' },
			title: { vlaue: '' },
			type: { vlaue: '' }
		}
		formData.fields.push(arr);
		// console.log(formData);
	}

	const dleForm = (index : number) => {
		formData.fields.splice(index, 1);
	}

	// const { optionsData } = useDictOptions<{
	//     article_cate: any[]
	// }>({
	//     article_cate: {
	//         api: detailSystem
	//     }
	// })

	const handleSave = async () => {
		console.log(route.query.id,'10000');
		await formRef.value?.validate()
		if (route.query.id) {
			await editSystem(formData)
		} else {
			await addSystem(formData)
		}
		removeTab()
		router.back()
	}
	// console.log(route.query.id, '0000');
	formData.fields = [];
	route.query.id && getDetails()
</script>